<template>
  <div class="menu" ref="menuRef">
    <div class="item" @click="clickMenu">
      <span>复制</span>
      <span>Ctrl+s</span>
    </div>
    <div class="item border-line">
      <span>粘贴</span>
      <span>Ctrl+c</span>
    </div>
    <div class="item">
      <span>关闭</span>
      <span></span>
    </div>
    <div class="item border-line">
      <span>重新加载</span>
      <span></span>
    </div>
    <div class="item">
      <span>打开百度</span>
      <span></span>
    </div>
    <div class="item">
      <span>打开翻译</span>
      <span></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const menuRef = ref(null)
const clickMenu = () => {
  menuRef.value.style.display = 'none'
}
onMounted(() => {
  document.addEventListener('contextmenu', (e) => {
    e.preventDefault()
    if (!menuRef.value?.style) return
    menuRef.value.style.display = 'block'
    menuRef.value.style.top = e.clientY + 'px'
    menuRef.value.style.left = e.clientX + 'px'
  })
  document.addEventListener('mouseup', (e) => {
    if (e.button !== 0) return
    if (!menuRef.value?.style) return
    if (!e.target.closest('.menu')) menuRef.value.style.display = 'none'
  })
})
</script>

<style scoped>
.menu {
  background-color: #ffffff;
  position: absolute;
  width: 300px;
  box-shadow: 0 0 10px rgb(102, 102, 102, .5);
  border-radius: 10px;
  padding: 10px 0;

  >.item {
    height: 30px;
    padding: 0 23px 0 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >span {
      color: #666666;
    }

    &:hover {
      background-color: #f2f2f2;
    }
  }

  >.border-line {
    border-bottom: 1px solid #d3e3fd;
  }
}
</style>